<template>
  <div>
    <el-form>
      <el-form-item label="订单编号" prop="orderNum">
        <el-input v-model="searchForm.orderNum"></el-input>
      </el-form-item>
      <el-form-item label="业务日期" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">至</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker placeholder="选择时间" v-model="searchForm.date2" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="单据状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择单据状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supply">
        <el-input v-model="searchForm.supply"></el-input>
      </el-form-item>
      <el-form-item label="确认状态" prop="sureStatus">
        <el-select v-model="searchForm.sureStatus" placeholder="请选择确认状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">导出</el-button>
        <el-button type="primary" @click="submitForm('searchForm')">查询</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>

    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%;">
        <el-table-column width="180" prop="number" label="订单编号" align="center"></el-table-column>
        <el-table-column width="120" prop="purchase" label="采购组织" align="center"></el-table-column>
        <el-table-column width="120" prop="supply" label="供应商" align="center"></el-table-column>
        <el-table-column width="120" prop="date" label="采购日期" align="center"></el-table-column>
        <el-table-column width="120" prop="materielNum" label="物料编码" align="center"></el-table-column>
        <el-table-column width="120" prop="materielName" label="物料名称" align="center"></el-table-column>
        <el-table-column width="120" prop="Specifications" label="规格型号" align="center"></el-table-column>
        <el-table-column width="120" prop="Company" label="单位" align="center"></el-table-column>
        <el-table-column width="120" prop="quantityPurchase" label="采购数量" align="center"></el-table-column>
        <el-table-column width="120" prop="quantityReceiving" label="收货数量" align="center"></el-table-column>
        <el-table-column width="120" prop="quantityWarehousing" label="入库数量" align="center"></el-table-column>
        <el-table-column width="120" prop="amountWarehousing" label="入库金额" align="center"></el-table-column>
        <el-table-column width="120" prop="quantityCope" label="应付数量" align="center"></el-table-column>
        <el-table-column width="120" prop="amountCope" label="应付金额" align="center"></el-table-column>
        <el-table-column width="120" prop="paymentAmount" label="付款金额" align="center"></el-table-column>
        <el-table-column width="120" prop="quantityReturn" label="退货申请数量" align="center"></el-table-column>
        <el-table-column width="120" prop="quantityReturnOut" label="退货出库数量" align="center"></el-table-column>
        <el-table-column width="120" prop="amountReturnOut" label="退货出库金额" align="center"></el-table-column>
        <el-table-column width="120" prop="documentattached" label="采购跟单" align="center"></el-table-column>
        <el-table-column width="120" prop="termPayment" label="付款条件" align="center"></el-table-column>
        <el-table-column width="120" prop="dateCope" label="应付到期日" align="center"></el-table-column>
        <el-table-column width="120" prop="buyer" label="采购员" align="center"></el-table-column>
        <el-table-column width="120" prop="Unpaid" label="未付金额" align="center"></el-table-column>
        <el-table-column width="120" prop="productTeam" label="产品小组" align="center"></el-table-column>
        <el-table-column width="120" prop="remarks" label="备注" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'order',
    data () {
      return{
        searchForm:{
          orderNum: '',
          date1: '',
          date2: '',
          status: '',
          supply: '',
          sureStatus: '',
        },
        currentPage: 1,
        tableData:[
          {
            number: 'APP2019823764832',
            purchase: '采购组织',
            supply: '供应商',
            date: '采购日期',
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            Company: '单位',
            quantityPurchase: '采购数量',
            quantityReceiving: '收货数量',
            quantityWarehousing: '入库数量',
            amountWarehousing: '入库金额',
            quantityCope: '应付数量',
            amountCope: '应付金额',
            paymentAmount: '付款金额',
            quantityReturn: '退货申请数量',
            quantityReturnOut: '退货出库数量',
            amountReturnOut: '退货出库金额',
            documentattached: '采购跟单',
            termPayment: '付款条件',
            dateCope: '应付到期日',
            buyer: '采购员',
            Unpaid: '未付金额',
            productTeam: '产品小组',
            remarks: '备注',
          }
        ]
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped="scoped">
</style>
